<template>
  <div class="activity">
    <page-header :title="org.name "></page-header>
    <scroll class="content" ref="scroll">
      <div>
        <search @search="_search"></search>
        <div class="banner-wrapper">
          <div class="organization-title"><img src="../assets/image/title_1.png"></div>
          <swiper class="banner-swiper" :options="swiperOption" v-if="banner && banner.length">
            <swiper-slide class="banner-swiper-item" v-for="(item, index) in banner" :key="index">
              <div class="banner-item" @click="_turnActive(item)">
                <div class="img"><img :src="item.img"></div>
                <div class="bottom">
                    <p>{{item.title}}</p>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <nav-list></nav-list>
        <div class="case">
          <div class="organization-title"><img src="../assets/image/title_2.png"></div>
          <ul>
            <li v-for="(item, index) in cases" :key="index" >
              <div class="img" @click="_turn(item)">
                <div class="img"><img :src="item.bean.picture"></div>
                <div class="bottoms">
                  <p>{{item.bean.name}}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable no-new-object */

import PageHeader from 'components/page-header'
import Search from 'components/search'
import Scroll from 'components/scroll/scroll'
import NavList from 'components/nav-list'
import Countdown from 'components/countdown'
import * as exampleApi from 'api/example'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { commonOption } from 'api/config'

export default {
  components: {
    PageHeader,
    Search,
    Scroll,
    NavList,
    Countdown,
    swiperSlide,
    swiper
  },
  data() {
    return {
      banner: [],
      type: '',
      text: '',
      cases: [],
      literacy: [],
      literacyActive: 0,
      swiperOption: {},
      org: {}
    }
  },
  created() {
    this.oauth()
    this._initBanner()
    this._initCase()
    this.initOrg()
  },
  methods: {
    _search(val) {
      this.text = val
       this.$router.push({
                path: `/activity:actype`, query: {title: val}
       })
    },
    _initBanner() {
      let response = []
      exampleApi.modePost('/api/public/wz/activity/list',
        {
          orgId: sessionStorage.getItem('siteId'),
          pageNo: 1,
          pageSize: 5
        })
        .then(res => {
          res.data.data.rows.forEach(item => {
            let data = {}
            data.id = item.bean.id
            data.title = item.bean.name
            data.img = item.bean.picture
            response.push(data)
          })
          this.banner = response
        })
    },
    _initCase(val) {
      this.text = val
      exampleApi.modePost('/api/public/wz/activity/list', {
        orgId: sessionStorage.getItem('siteId'),
        pageNo: 1,
        pageSize: 4,
        type: 1
      }).then(
        res => {
          this.cases = res.data.data.rows
        }
      )
    },
      _turn(item) {
      this.$router.push({
        path: `/activity/detail${item.bean.id}:0`
      })
    },
    _turnActive(item) {
      this.$router.push({
        path: `/activity/detail${item.id}:0`
      })
    },
    oauth() {
//      var s = 'http://qsngxm.hztangong.com/wx/index.html?siteId=531B601029153CBE0129165AF7C00040&wxAvatar=http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLzWQgqxY3kMPxyWnNric9AgX4iayCB7TnRfibQs4sQ37RnU4m85vo5EbAWPDrB07XVSRltXibVOdibDBQ/132&appId=wx07010e298192a44f&payOpen=1&studentId=27C53C7D71FB7DE0E0530100007F6947&studentName=%E9%BB%84%E7%8E%89%E6%9E%97&openId=oXZJV0sllFw5QfHXknvBBMMxZx5M#/area'
      var openId = window.sessionStorage.getItem('openId')
      if (openId == null || openId === '' || openId === 'undefined') {
        var s = window.location.href
        var arr = s.split('?')
        var url = arr[1]
        var theRequest = new Object()
        var strs = url.split('&')
        for (var i = 0; i < strs.length; i++) {
          var content = strs[i].split('=')
          theRequest[content[0]] = content[1]
        }
        if (theRequest.openId == null) {
          location.href = commonOption.payment_host + '/a/wxOAuth?appId=' + theRequest.appId
        } else {
          var openIds = theRequest.openId.split('#/')
          window.sessionStorage.setItem('openId', openIds[0])
          window.sessionStorage.setItem('studentId', theRequest.studentId)
          window.sessionStorage.setItem('studentName', decodeURIComponent(theRequest.studentName))
          window.sessionStorage.setItem('siteId', theRequest.siteId)
          window.sessionStorage.setItem('mobile', theRequest.mobile)
          window.sessionStorage.setItem('userType', theRequest.userType)
          window.sessionStorage.setItem('wxAvatar', theRequest.wxAvatar)
          window.sessionStorage.setItem('appId', theRequest.appId)
          window.sessionStorage.setItem('payOpen', theRequest.payOpen)
          var currentUrl = window.location.href
          var targetUrl = currentUrl.replace(/openId=/, '')
          console.log(targetUrl.replace(/studentId=/, ''))
          window.location.href = targetUrl.replace(/studentId=/, '')
          // history.pushState(null,null,currentUrl)
          // alert(window.location.href)
        }
      }
    },
    initOrg() {
      exampleApi.modePost('/api/public/sys/info/getSettingByOrg', {
        orgId: sessionStorage.getItem('siteId')
      }).then(
        res => {
          this.org = res.data.data.initData.org
        }
      )
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .bottoms{
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    display:flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
    p {
      font-size: 20px;
      line-height: 46px;
      color: #ffffff;
    }
  }
  .activity{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #e6e6e6;
    .content{
      position: relative;
      height:calc(~"100% - 84px");
      overflow: hidden;
      &::after {
        position: absolute;
        display: none;
        content: '';
        top: 10px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        background: url('../assets/image/loading.gif') no-repeat center / 40px auto;
      }
      .organization-title{
        height:40px;
        display:flex;
        justify-content:center;
        align-items: center;

        img{
          width: auto;
          height: 34px;

        }
        margin-bottom: 15px;
      }
      .banner-wrapper{
        width: 100%;
        box-sizing: border-box;
        padding: 20px 15px;
        background-color: #fff;
        margin: 2px 0 20px;
        .banner-swiper{
          font-size: 0;
          height: 100%;
          .banner-swiper-item{
            display: inline-block;
            width: 435px;
            height: 260px;
            background-color: #f2f2f2;
            box-shadow: 0px 2px 7px 0px
              rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            box-sizing: border-box;
            overflow:hidden

          }
        }
        .banner-item{
          position: relative;
          width: 100%;
          height: 260px;

          .img{
            width: 100%;
            height: 100%;
            img{
              width: 100%;
              height: auto;
            }
          }
          .bottom{
            position:absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 46px;
            background-color: rgba(0, 0, 0, 0.5);
            display:flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 20px;
            p {
              font-size: 20px;
              line-height: 46px;
              color: #ffffff;
            }
          }
          .bottomed{
            position:absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 46px;
            background-color: rgba(0, 0, 0, 0.5);
            display:flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 20px;
            p {
              font-size: 20px;
              line-height: 46px;
              color: #ffffff;
            }
          }
        }
      }
      .case{
        margin-top: 20px;
        padding-top: 20px;
        background-color: #fff;

        .organization-title{
          padding-left: 15px;
        }
        ul{
          width: 100%;
          box-sizing: border-box;
          padding: 0 15px;
          display:flex;
          flex-wrap: wrap;
          li{
            position: relative;
            width:calc(~"50% - 10px");
            margin-bottom: 20px;
            &:nth-child(2n) {
              margin-left: 20px;
            }
            height: 190px;
            background-color: #004962;
            box-shadow: 1px 2px 7px 0px
              rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            overflow:hidden;
            .img{
              width: 100%;
              height: 100%;
              overflow:hidden;
              img{
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      .literacy{
        margin-top: 20px;
        padding: 20px 0;
        background-color: #fff;
        .organization-title{
          padding-left: 15px;
        }
        ul{
          width: 100%;
          box-sizing: border-box;
          display:flex;
          flex-wrap: wrap;
          li{
            width: 25%;
            display:flex;
            justify-content: center;
            align-items: center;
            margin: 13px 0;
            span{
              box-sizing: border-box;
              width: 126px;
          height: 45px;
          border-radius: 8px;
          border: solid 1px #cccccc;
          font-size: 22px;
          color: #565a70;
          text-align: center;
          line-height: 45px;
            }

        &.active{
          span{
            border: none;
            background-color: #419eff;
            color: #fff;
          }
        }
          }
        }
      }
    }
    .content.loading{
      &::after {
        display: block;
      }
    }
  }
</style>
